<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>人脸识别</title>
    <script src="/js/tracking-min.js"></script>
    <script src="/js/face-min.js"></script>
    <script src="/js/stats.min.js"></script>
    <script src="/js/vue.min.js" type="text/javascript"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="/css/face.css">
    <style>
        video, canvas {
            margin:200px auto;
            position: absolute;
            left: 0;
            right: 0;
        }
        .scanTip {
            text-align: center;
            color: white;
            margin: 0px auto;
            font-size: 18px;
        }
    </style>
</head>

<body class="body-bg">
<div id="app">
    <div v-show="showContainer" >
        <video ref="refVideo" id="video" width="800" height="400" preload autoplay loop muted></video>
        <canvas ref="refCanvas" id="canvas" width="800" height="400"></canvas>
    </div>
    <h2 class="scanTip">{{scanTip}}</h2>
    <img v-show="!showContainer" :src="imgUrl" width="800" height="400" class="imgpre"/>
</div>

<script>

const app = new Vue({
    el: "#app",
    data() {
        return {
            showContainer: true,   // 显示
            tracker: null,
            tipFlag: false,         // 提示用户已经检测到
            flag: false,            // 判断是否已经拍照
            context: null,          // canvas上下文
            removePhotoID: null,    // 停止转换图片
            scanTip: '人脸识别中...',// 提示文字
            imgUrl: '',              // base64格式图片
            canvas: null
        }
    },
    mounted() {
        this.playVideo()
    },
    methods: {

        playVideo() {
            var video = document.getElementById('video');
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');
            this.tracker = new tracking.ObjectTracker('face');
            this.tracker.setInitialScale(4);
            this.tracker.setStepSize(2);
            this.tracker.setEdgesDensity(0.1);

            tracking.track('#video', this.tracker, {camera: true});

            this.tracker.on('track', this.handleTracked);
        },

        handleTracked(event) {
                this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
                if (event.data.length === 0) {
                    this.scanTip = '未识别到人脸'
                } else {
                    if (!this.tipFlag) {
                        this.scanTip = '识别成功，正在拍照，请勿乱动~'
                    }
                    // 1秒后拍照，仅拍一次
                    if (!this.flag) {
                        this.scanTip = '拍照中...'
                        this.flag = true
                        this.removePhotoID = setTimeout(() => {
                                this.tackPhoto()
                                this.tipFlag = true
                            },
                            2000
                        )
                    }
                    event.data.forEach(this.plot);
                }
        },

        plot(rect){
            this.context.strokeStyle = '#eb652e';
            this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);
            this.context.font = '11px Helvetica';
            this.context.fillStyle = "#fff";
            this.context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
            this.context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
        },

        // 拍照
        tackPhoto() {

            this.context.drawImage(this.$refs.refVideo, 0, 0, 500, 500)
            // 保存为base64格式
            this.imgUrl = this.saveAsPNG(this.$refs.refCanvas)
            var formData = new FormData();
            formData.append("file", this.imgUrl);
            this.scanTip = '登录中，请稍等~'

            axios({
                method: 'post',
                url: '/faceDiscern',
                data: formData,
            }).then(function (response) {
                alert(response.data.data);
                window.location.href="http://127.0.0.1:8081/home";
            }).catch(function (error) {
                console.log(error);
            });

            this.close()
        },

        // 保存为png,base64格式图片
        saveAsPNG(c) {
            return c.toDataURL('image/png', 0.3)
        },

        // 关闭并清理资源
        close() {
            this.flag = false
            this.tipFlag = false
            this.showContainer = false
            this.tracker && this.tracker.removeListener('track', this.handleTracked) && tracking.track('#video', this.tracker, {camera: false});
            this.tracker = null
            this.context = null
            this.scanTip = ''
            clearTimeout(this.removePhotoID)
        }
    }
})
</script>

</body>
</html>
